<template>
  <a-select
    v-model="cascaderList"
    :options="adidList"
    placeholder="请选择所属区域"
    :allowClear="true"
    :showSearch="true"
    :changeOnSelect="true"
    @change="adidChange"
    mode="multiple"
    :filter-option="filterOption"
  />
</template>
<script>
export default {
  props: {
    // 回显值
    value: {
      type: Array,
    },
  },
  data() {
    return {
      adidList: [], // 搜索范围
      cascaderList: this.value || [], // 级联数据
    }
  },
  watch: {
    value(val) {
      this.cascaderList = val || []
    },
  },
  created() {
    // 过滤所属区域选择范围
    this.filterAdid()
  },
  methods: {
    // 下拉框搜索
    filterOption(input, option) {
      return option.componentOptions.children[0].text.indexOf(input) >= 0
    },
    // 过滤所属区域选择范围
    filterAdid() {
      let adidList = JSON.parse(JSON.stringify(this.$store.state.form.formData.dynamicDataList['ad4jx'][0].children))
      let countryMap = {}
      adidList.forEach((v) => {
        v.children.forEach((s) => {
          countryMap[s.value] = s.name
          delete s.children
        })
      })
      this.$emit('f_setCountryMap', countryMap)
      this.adidList = adidList
    },
    // 所属区域选中
    adidChange(value) {
      let country = []
      // 找市级下的县
      for (let v of this.adidList) {
        if (value.includes(v.value)) {
          v.children.forEach((s) => {
            country.push(s.value)
          })
        }
      }
      // console.log('country', country)
      this.$emit('f_adidChange', country, value)
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
